<template>
  <div class="must">
  <div class="profile">
    <div class="menu">
      <div class="head">会员中心</div>
      <div class="menu-wrap">
        <Menu text-color="#666"
          active-text-color="#666"
          :default-openeds="['2', '3', '4', '5', '8']"
          :router="true"
          default-active="/profile/welcome">
          <menu-item index="/profile/welcome" class="menu-group">
            <img class="menu-item-icon" src='~/assets/images/welcome.png' alt="">
            <span slot="title">欢迎页</span>
          </menu-item>

          <Submenu index="2" class="menu-group">
            <template v-slot:title>
              <img class="menu-item-icon" src="~/assets/images/account-config.png" alt="">
              <span>账户设置</span>
            </template>
            <menu-item-group>
              <menu-item index="/profile/account-setting/personal-settings">
                <template v-slot:title>
                  <img class="menu-item-icon" src="~/assets/images/self-config.png" alt="">
                  <span>个人设置</span>
                </template>
              </menu-item>
              <menu-item index="/profile/account-setting/vip-benefits">
                <template v-slot:title>
                  <img class="menu-item-icon" src="~/assets/images/vip-benefits.png" alt="">
                  <span>会员权益</span>
                </template>
              </menu-item>
              <menu-item index="/profile/account-setting/account-security">
                <template v-slot:title>
                  <img class="menu-item-icon" src="~/assets/images/account-security.png" alt="">
                  <span>账户安全</span>
                </template>
              </menu-item>
            </menu-item-group>
          </Submenu>

          <Submenu index="3" class="menu-group">
            <template v-slot:title>
              <img class="menu-item-icon" src="~/assets/images/purchase-manage.png" alt="">
              <span>采购管理</span>
            </template>
            <menu-item-group>
              <menu-item index="/profile/purchase-management/my-order">
                <template v-slot:title>
                  <img class="menu-item-icon" src="~/assets/images/my-order.png" alt="">
                  <span>我的订单</span>
                </template>
              </menu-item>
              <menu-item index="/profile/purchase-management/my-inquiry">
                <template v-slot:title>
                  <img class="menu-item-icon" src="~/assets/images/my-inquiry.png" alt="">
                  <span>我的询价</span>
                </template>
              </menu-item>
              <menu-item index="/profile/purchase-management/my-demand">
                <template v-slot:title>
                  <img class="menu-item-icon" src="~/assets/images/my-demond.png" alt="">
                  <span>我的需求</span>
                </template>
              </menu-item>
              <menu-item index="/profile/purchase-management/my-consign">
                <template v-slot:title>
                  <img class="menu-item-icon" src="~/assets/images/my-consign.png" alt="">
                  <span>我的委托</span>
                </template>
              </menu-item>
            </menu-item-group>
          </Submenu>

          <Submenu index="4" class="menu-group">
            <template v-slot:title>
              <img class="menu-item-icon" src="~/assets/images/pay-manage.png" alt="">
              <span>支出管理</span>
            </template>
            <menu-item index="/profile/expenditure-management/expenditure-summary">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/pay-summary.png" alt="">
                <span>支出概要</span>
              </template>
            </menu-item>
            <menu-item index="/profile/expenditure-management/expenditure-total">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/total-pay.png" alt="">
                <span>全部支出</span>
              </template>
            </menu-item>
            <menu-item index="/profile/expenditure-management/expenditure-classification">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/pay-sort.png" alt="">
                <span>支出分类</span>
              </template>
            </menu-item>
            <menu-item index="/profile/expenditure-management/my-supplier">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/my-supplier.png" alt="">
                <span>我的供应商</span>
              </template>
            </menu-item>
          </Submenu>

          <Submenu index="5" class="menu-group">
            <template v-slot:title>
              <img class="menu-item-icon" src="~/assets/images/message-manage.png" alt="">
              <span>消息管理</span>
            </template>
            <menu-item index="/profile/message-management/my-message">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/my-message.png" alt="">
                <span>我的消息</span>
              </template>
            </menu-item>
            <menu-item index="/profile/message-management/notification-management">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/notification-manage.png" alt="">
                <span>通知管理</span>
              </template>
            </menu-item>
          </Submenu>

          <menu-item index="/profile/receipt-address/receipt-address" class="menu-group">
            <img class="menu-item-icon" src='~/assets/images/receive-address.png' alt="">
            <span slot="title">收货地址</span>
          </menu-item>

          <menu-item index="/profile/invoice-management/invoice-management" class="menu-group">
            <img class="menu-item-icon" src='~/assets/images/increase-qualification.png' alt="">
            <span slot="title">增票资质</span>
          </menu-item>

          <Submenu index="8" class="menu-group">
            <template v-slot:title>
              <img class="menu-item-icon" src="~/assets/images/collection-and-history.png" alt="">
              <span>收藏与历史</span>
            </template>
            <menu-item index="/profile/collection-history/collection-products">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/collect-product.png" alt="">
                <span>收藏产品</span>
              </template>
            </menu-item>
            <menu-item index="/profile/collection-history/collection-company">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/collect-company.png" alt="">
                <span>收藏企业</span>
              </template>
            </menu-item>
            <menu-item index="/profile/collection-history/browsing-history">
              <template v-slot:title>
                <img class="menu-item-icon" src="~/assets/images/review-history.png" alt="">
                <span>浏览历史</span>
              </template>
            </menu-item>
          </Submenu>
        </Menu>
      </div>
    </div>

    <div class="second-route">
      <router-view/>
    </div>
  </div>
  </div>
</template>

<script>
import { Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'

export default {
  name: 'Profile',
  components: {
    Menu,
    Submenu,
    MenuItem,
    MenuItemGroup
  },
  methods: {
    // handleSelect(index) {
    //   this.$router.push(index)
    // }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.must {
  background-color: $bg-color-1;
}

.profile {
  //padding: 80px 15vw;
  padding: 80px 0;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: $bg-color-1;

  $menu-width: 305px;
  $second-route-width: calc(100% - 305px - 30px);

  .menu {
    width: $menu-width;
    min-height: 1000px;
    //max-height: 1310px;
    background-color: #fff;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 60px;
      background-color: $theme-color-1;
      color: #fff;
      font-size: 20px;
    }

    // menu组件右边框
    /deep/ .el-menu {
      border: none;
    }

    // menu组件父项margin
    /deep/ .el-submenu__title, .el-menu-item {
      padding-left: 50px !important;
      border-left: solid 4px rgba(255, 255, 255, 0);
    }

    // menu组件子项padding
    /deep/ .el-menu-item-group__title {
      padding: 0 !important;
    }

    // 重写菜单项激活样式
    /deep/ .el-menu-item.is-active {
      background-color: rgb(243,244,247);
      border-left: solid 4px $theme-color-1;
    }

    .menu-group {
      border-bottom: solid 1px #e7e7e7;

      // menu组件子项margin
      /deep/ .el-menu-item {
        padding-left: 80px !important;
      }
    }

    .menu-item-icon {
      margin-right: 10px;
    }
  }

  .second-route {
    width: $second-route-width;
  }
}
</style>
